<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">实时一览</text>
				<view style="margin-left: 10upx;" @click="showDrawer">
					<uni-icons type="search" size="16" color="#156DAC"></uni-icons>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content padding" >
			<view class="draw-panel" style="height: 60upx;">
				<view class="operation-panel" style="padding: 0;">
					<view 
						v-for="(item,index) in outletTypeList" 
						:key="item.code" 
						class="item-btn" :class="item.code === query.outletType?'':'white'" @click="changeOutletType2(item.code)"
						style="display: inline-block;width: 20%;margin-right: 4%;height: 40upx;line-height: 40upx;"
					>
						<text>{{item.codeName}}</text>
					</view>
				</view>
			</view>
			<view class="page-content-list">
				<scroll-view style="height: calc(100vh - 300upx);"
					scroll-y="true" 
					:refresher-enabled="enabled" 
					:refresher-threshold="50"
					:refresher-triggered="triggered"
					@refresherpulling="onPulling"
				    @refresherrefresh="onRefresh"
					@scrolltolower="handleLoadMore"
					@scroll="scroll"
				>
					<block v-for="(item, index) in listData" :key="index">
						<view class="content-list-cell">
							<view class="order-item">
								<view class="order-item-content">
									<view class="order-content-row">
										<view class="label">排口名称</view><view class="value">{{item.outletName}}</view>
									</view>
									<view class="order-content-row">
										<view class="label">排口状态</view><view class="value" :class="colorMap[item.outletNewStatus]?colorMap[item.outletNewStatus]:'outlet-normal'" @click="handleToFactor(item)">{{item.outletNewStatusName}}</view>
									</view>
									<view v-if="item.realTimeStr" class="order-content-row">
										<view class="label">时间</view><view class="value">{{item.realTimeStr}}</view>
									</view>
									
									<view v-if="dto.factorLibraryIdStr" v-for="(dto,idx) in item.factorDtoList" :key="idx">
										<view v-if="dto.val!=null"  class="order-content-row">
											<view class="label">{{dto.factorLibraryIdStr ? columnMap[dto.factorLibraryIdStr] : ''}}</view>
											<view class="value" :class="dto.zsVal!=null ? '':colorMap2[dto.dataStatus]?colorMap2[dto.dataStatus]:''">{{returnFloat(dto.val)}}</view>
										</view>
										<view v-if="dto.zsVal!=null"  class="order-content-row">
											<view class="label">{{dto.factorLibraryIdStr ? columnMap[dto.factorLibraryIdStr+'_z'] : ''}}</view>
											<view class="value" :class="colorMap2[dto.dataStatus]?colorMap2[dto.dataStatus]:''">{{returnFloat(dto.zsVal)}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
					<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
				</scroll-view>
			</view>
			
		</view>
		
		<uniDrawer ref="draw" :mask="true" mode='right' :width="windowWidth">
			<view style="height: 90upx;">&nbsp;</view>
			<view class="draw-panel">
				<scroll-view scroll-y style="height: calc(100vh - 350upx);">
				<!-- <view class="operation-panel flex" style="padding: 20upx;">
					<view 
						v-for="(item,index) in outletTypeList" 
						:key="item.code" 
						class="item-btn" :class="item.code === query.outletType?'':'white'" @click="changeOutletType(item.code)"
					>
						<text>{{item.codeName}}</text>
					</view>
				</view> -->
				<view class="title"><text>排口状态</text></view>
				
				<view class="operation-panel flex" style="padding: 20upx;">
					<view 
						v-for="(item,index) in outletNewStatus" 
						class="item-btn mini" 
						:class="query.outletNewStatus.includes(item.code)?'':'white'" 
						@click="changeOutletStatus(item)" 
						:key="index"
					>
						<text>{{item.codeName}}</text>
					</view>
				</view>
				<view class="drawer-form">
					<view class="drawer-form-item">
						<view class="drawer-label"><text>项目部</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.projectDepartmentId" :list="projectListBak" :props="pickerProps"  @confirm="(e)=>pickerConfim('project',e)">
								<view slot="header-top">
									<view style="padding: 10upx;">
										<uni-easyinput type="text" v-model="searchText" placeholder="请输入关键字" prefixIcon="search" @input="searchPD" />
									</view>
								</view>
								<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
									<text v-if="query.projectDepartmentName" style="border: 0;" class="lb-picker-text">{{query.projectDepartmentName}}</text>
									<text v-else class="lb-picker-placeholder" style="border: 0;">请选择项目部</text>
									<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
								</view>
							</lb-picker>
						</view>
					</view>
					<!-- <view class="drawer-form-item">
						<view class="drawer-label"><text>企业</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.enterpriseId" :list="enterpriseListBak" :props="pickerProps"  @confirm="(e)=>pickerConfim('enterprise',e)">
								<view slot="header-top">
									<view style="padding: 10upx;">
										<uni-easyinput type="text" v-model="searchText2" placeholder="请输入关键字" prefixIcon="search" @input="searchE" />
									</view>
								</view>
								<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
									<text v-if="query.enterpriseName" style="border: 0;" class="lb-picker-text">{{query.enterpriseName}}</text>
									<text v-else class="lb-picker-placeholder" style="border: 0;">请选择企业</text>
									<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
								</view>
							</lb-picker>
						</view>
					</view> -->
					<view class="drawer-form-item">
						<view class="drawer-label"><text>排口</text></view>
						<view class="drawer-content">
							<view class="form-ipt" @click="showPkPicker">
								<view class="lb-picker-placeholder-panel" style="text-align: right;line-height: 1.2;">
									<text v-if="outletName" style="border: 0;" class="lb-picker-text">{{outletName}}</text>
									<text v-else class="lb-picker-placeholder" style="border: 0;">请选择排放口</text>
									<uni-icons class="icon" type="forward" size="20" color="#999"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="drawer-form-item">
						<view class="drawer-label"><text>控制级别</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.controlLevel" :list="ctlList" :props="pickerDictProps" @confirm="(e)=>pickerConfim('ctl',e)">
								<view class="lb-picker-placeholder-panel">
									<text v-if="query.controlLevelName" class="lb-picker-text">{{query.controlLevelName}}</text>
									<text v-else class="lb-picker-placeholder">请选择控制级别</text>
								</view>
							</lb-picker>
						</view>
					</view> -->
					<!-- <view class="drawer-form-item">
						<view class="drawer-label"><text>行业类别</text></view>
						<view class="drawer-content">
							<lb-picker v-model="query.industryCategory" :list="idyList" :props="pickerDictProps" @confirm="(e)=>pickerConfim('idy',e)">
								<view class="lb-picker-placeholder-panel">
									<text v-if="query.industryCategoryName" class="lb-picker-text">{{query.industryCategoryName}}</text>
									<text v-else class="lb-picker-placeholder">请选择行业类别</text>
								</view>
							</lb-picker>
						</view>
					</view> -->
					<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/>
				</view>
				</scroll-view>
				<view class="bottom-panel">
					<view class="item-btn white" @click="closeDrawer"><text>关闭</text></view>
					<view class="item-btn lp" @click="handleQuery"><text>确定</text></view>
				</view>
			</view>
		</uniDrawer>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import LbPicker from '@/components/lb-picker'
	
	import {parseTime} from '@/common/util.js'
	import {getDict} from '@/common/dict.js'
	
	const listQuery = '/realTimeView/selectOutletRealtimeData'
	
	//  项目、企业
	const projectUrl = '/base/department/list'
	const enterpriseUrl = '/base/enterprise/list'
	const getTree = '/base/outlet/listTree'	
	export default {
		components:{
			LbPicker,
			uniIcons,
			uniLoadMore,
			uniDrawer,
			uniNavBar
		},
		data() {
			return {
				enabled: true,
				triggered: false,
				scroll_refresher_enabled: false,
				windowWidth: 300,
				reload: false,
				pickFlag: true,
				listData: [],
				column: [],
				columnMap: {},
				last_id: '',
				status: 'loading',
				range: [],
				rangeKey: 'name',
				timePickerType: 'dateToTime',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				query: {
					page: 1,limit: 10,
					outletType: 'e012_01', 
					outletNewStatus: ['e046_05', 'e046_06', 'e046_03'],
					// enterpriseId: '', 
					enterpriseName: '',
					// projectDepartmentId: '',
					projectDepartmentName : '',
					controlLevel: '',
					controlLevelName: '',
					industryCategory: '',
					industryCategoryName: '',
				},
				outletName: '',
				chooseQueryType: 1,
				queryType: 1,
				pickerProps: {
					label: 'name',
					value: 'id',
				},
				pickerDictProps: {
					label: 'codeName',
					value: 'code',
				},
				searchText: '',
				searchText2: '',
				// 排口状态
				outletNewStatus: [],
				// 所有项目
				projectList: [{id:'',name:'全部'}],
				projectListBak: [],
				enterpriseList: [{id:'',name:'全部'}],
				enterpriseListBak: [],
				outletTypeList: [],
				ctlList: [],
				idyList: [],
				colorMap: {
					'e046_04':'outlet-fault',
					'e046_05':'outlet-over-standard',
					'e046_03':'outlet-off-line',
					'e046_01':'outlet-decommissioning',
					'e046_06':'outlet-constant-value',
					// outlet-normal
				},
				colorMap2: {
					'e047_01':'outlet-over-standard',
					'e047_02':'outlet-constant-value',
					'e047_03':'',
					'e047_04':'outlet-fault',
					// outlet-normal
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth;
				}
			});
			// 字典
			this.outletNewStatus = getDict('e046')
			this.outletTypeList = getDict('e012')
			this.ctlList = [{code:'',codeName:'全部'},...getDict('e014')]
			this.idyList = [{code:'',codeName:'全部'},...getDict('e013')]
			// list
			this.getList();
			this.initPicker()
		},
		// onPullDownRefresh() {
		// 	this.last_id = '';
		// 	this.listData =  []
		// 	this.query.page = 1
		// 	this.getList();
		// 	setTimeout(()=>{
		// 		uni.stopPullDownRefresh();
		// 	},100)
		// },
		// onReachBottom() {
		// 	this.status = 'more';
		// 	this.query.page = this.query.page + 1
		// 	this.getList(true);
		// },
		methods: {
			returnFloat(value){//格式化数据 统一小数点后三位，不足的补
				// if(value>9999){
				// 	return  Math.round(value)
				// }
				var value=Math.round(parseFloat(value)*1000)/1000;
				var xsd=value.toString().split( "." );
				if (xsd.length==1){
					value=value.toString()+ ".000" ;
					return value;
				}
				if (xsd.length>1){
					if (xsd[1].length == 1){
						value=value.toString()+ "00" ;
						return value;
					}else{
						if (xsd[1].length == 2){
							value=value.toString()+ "0" ;
						}
						return value;  
					}
				}  
			},
			searchPD(){
				const newList = this.projectList.filter(item=>item.name.indexOf(this.searchText) !== -1)
				this.projectListBak = newList
			},
			searchE(){
				const newList = this.enterpriseList.filter(item=>item.name.indexOf(this.searchText2) !== -1)
				this.enterpriseListBak = newList
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				if(e.length > 0){
					const item = e[0]
					this.query.outletId = item.id
					this.outletName = item.name
				}
			},
			handleToFactor(item){
				const outletId = item.outletId
				uni.navigateTo({
					url:`/pages/realTimeFactor/realTimeFactor?outletId=${outletId}`
				})
			},
			handleLoadMore(){
				// this.getList(true);
			},
			scroll(e){
				if (e.detail.scrollTop === 0) {
					this.scroll_refresher_enabled = true
				} else {
					this.scroll_refresher_enabled = false
				}
			},
			onPulling(){
			},
			onRefresh(){
				this.triggered = true
				if(this.status === 'loading'){
					this.$nextTick(()=>{
						this.triggered = false
					});
					return
				}
				// if(!this.scroll_refresher_enabled) {
				// 	this.$nextTick(()=>{
				// 		this.triggered = false
				// 	});
				// 	return
				// }
				this.listData =  []
				this.query.page = 1
				
				this.getList();
			},
			getColorByOutletNewStatus(outletNewStatus) {
			  if (outletNewStatus === 'e046_04') {
			    return 'outlet-fault'
			  } else
			  if (outletNewStatus === 'e046_05') {
			    return 'outlet-over-standard'
			  } else if (outletNewStatus === 'e046_03') {
			    return 'outlet-off-line'
			  } else if (outletNewStatus === 'e046_01') {
			    return 'outlet-decommissioning'
			  } else if (outletNewStatus === 'e046_06') {
			    return 'outlet-constant-value'
			  } else {
			    return 'outlet-normal'
			  }
			},
			pickerConfim(type,e){
				const {item} = e
				if(!item)return
				if(type === 'project'){
					const {id,name} = item
					this.query.projectDepartmentId = id
					this.query.projectDepartmentName = name
				}else if(type === 'enterprise'){
					const {id,name} = item
					this.query.enterpriseId = id
					this.query.enterpriseName = name
				}else if(type === 'ctl'){
					const {code, codeName} = item
					this.query.controlLevel = code
					this.query.controlLevelName = codeName
				}else if(type === 'idy'){
					const {code, codeName} = item
					this.query.industryCategory = code
					this.query.industryCategoryName = codeName
				}
			},
			initPicker(){
				// this.$api.request(enterpriseUrl,{
				// 	method: 'get',
				// }).then(res=>{
				// 	if(res.data.list && res.data.list.length > 0) {
				// 		this.enterpriseList.push(...res.data.list)
				// 		this.enterpriseListBak.push(...res.data.list)
				// 	}
				// })
				this.$api.request(projectUrl,{
					method: 'get',
				}).then(res=>{
					if(res.data.list && res.data.list.length > 0) {
						this.projectList.push(...res.data.list)
						this.projectListBak.push(...res.data.list)
					}
				})
				this.$api.request(getTree,{
					method: 'get',
				}).then(res=>{
					if(res.success){
						const result = []
						res.data.list.map(item=>{
							if(item.children && item.children.length > 0){
								result.push(item)
							}
						})
						this.range = result
					}
				}).catch(()=>{
				})
			},
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			changeOutletStatus(item) {
				const {code} = item
				const now = this.query.outletNewStatus
				if(now.includes(code)){
					const index = now.indexOf(code)
					this.query.outletNewStatus.splice(index,1)
				}else{
					this.query.outletNewStatus.push(code)
				}
			},
			clearQuery() {
				this.query.startDate = ''
				this.query.endDate = ''
				this.query.outletId = null
			},
			handleQuery() {
				this.query.page = 1
				this.listData = []
				this.getList();
				this.$refs.draw.close()
			},
			showDrawer(){
				// 校对选择的类型
				// this.chooseQueryType = this.queryType
				this.$refs.draw.open()
			},
			closeDrawer(){
				this.$refs.draw.close()
			},
			goDetail(){
				uni.navigateTo({
					url:`/pages/form/devops/form2/form2`
				})
			},
			handleAdd(){
				
			},
			changeOutletType(i) {
				this.query.outletType = i
			},
			changeOutletType2(i) {
				this.query.outletType = i
				this.handleQuery()
			},
			getList(loadMore = false){
				const query = JSON.parse(JSON.stringify(this.query))
				var outletNewStatusVar = ''
				      if (query.outletNewStatus != null) {
				        for (let i = 0; i < query.outletNewStatus.length; i++) {
				          outletNewStatusVar = outletNewStatusVar + query.outletNewStatus[i] + ','
				        }
				      }
				      query.outletNewStatus = outletNewStatusVar
				
				this.status = 'loading';
				this.$api.request(listQuery,{
					method: 'get',
					data: query
				}).then(res=>{
					// console.log(res)
					this.status = '';
					if(res.success) {
						const data = res.data
						// data
						// this.formObj = res.data
						// this.steps = res.data.alarmProcesses.map(item=>{
						// 	return {
						// 		title: item.operationContent,
						// 		desc: item.operationTime
						// 	}
						// })
						const {column,listRealTimeDto} = data.realTimeSumDto
						this.column = column
						const map = {}
						column.forEach(item=>{
							map[item.prop] = item.label
						})
						this.columnMap = map
						this.listData  = listRealTimeDto
						this.reload = false;
						this.reload = false;
						this.triggered = false
					}else{
						this.$api.toastMsg(res.message)
					}
				}).catch(()=>{
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.draw-panel{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 90upx);
		.title{
			margin: 0 20upx;
			padding-bottom: 5upx;
			border-bottom: 1upx solid #156dac;
		}
		.operation-panel{
			&.flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: row;
			}
		}
		.bottom-panel{
			
		}
		.operation-panel,.bottom-panel{
			padding: 40upx 20upx;
			.item-btn{
				width: 100%;
				position: relative;
				background-color: #156dac;
				color: #fff;
				text-align: center;
				height: 80upx;
				line-height: 80upx;
				border-radius: 10upx;
				margin-bottom: 20upx;
				&.mini{
					width: 30%;
					overflow: hidden;
				}
				&.lp{
					letter-spacing: 10upx;
				}
				&.green{
					background-color: #5eb00e;
					color: #fff;
				}
				&.white{
					background-color: #fff;
					color: #156dac;
					border: 1px solid #156DAC;
				}
				.font-icon{
					position: absolute;
					top: 15upx;
					left: 30upx;
					width: 50upx;
					text-align: center;
					border-radius: 50%;
					height: 50upx;
					line-height: 50upx;
					background-color: #156dac;
					color: #fff;
					&.active{
						background-color: #fff;
						color: #156dac;
					}
				}
				.icon{
					position: absolute;
					left: 30upx;
				}
			}
		}
		.left-panel{
			
		}
	}
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					// flex: 0 0 200upx;
					flex: 1;
					color: #156DAC;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 28upx;
			}
		}
	}
</style>
